Skip to content

[IMP] color picker: add eye dropper support#8737

Closed
hokolomopo wants to merge 2 commits into
masterfrom
master-eye-dropper-adrm
Closed

[IMP] color picker: add eye dropper support#8737
hokolomopo wants to merge 2 commits into
masterfrom
master-eye-dropper-adrm

Conversation

@hokolomopo

Copy link
Copy Markdown
Contributor

Description:

[IMP] color picker: add eye dropper support

This commit adds a button to pick a color from anywhere on your
screen using the EyeDropper API.

The EyeDropper API is still experimental and not widely supported
(only on desktop chromium browser at the time of writing this),
so we make sure the button is only there when the API is avilable.

[IMP] typing: improve globalThis typing

  • globalThis.Chart was defined twice
  • ChartGeo was defined in window instead of globalThis

Task: 6226285

review checklist

  • feature is organized in plugin, or UI components
  • support of duplicate sheet (deep copy)
  • in model/core: ranges are Range object, and can be adapted (adaptRanges)
  • in model/UI: ranges are strings (to show the user)
  • undo-able commands (uses this.history.update)
  • multiuser-able commands (has inverse commands and transformations where needed)
  • new/updated/removed commands are documented
  • exportable in excel
  • translations (_t("qmsdf %s", abc))
  • unit tested
  • clean commented code
  • track breaking changes
  • doc is rebuild (npm run doc)
  • status is correct in Odoo

@robodoo

robodoo commented May 18, 2026

Copy link
Copy Markdown
Collaborator

Pull request status dashboard

@pro-odoo pro-odoo left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trop cool :D

Comment thread src/global_augmentation.d.ts Outdated
Comment thread src/components/color_picker/color_picker.ts Outdated
@hokolomopo hokolomopo force-pushed the master-eye-dropper-adrm branch from 046a04f to b9ac93f Compare May 19, 2026 07:39
@rrahir

rrahir commented May 19, 2026

Copy link
Copy Markdown
Collaborator

this will need to be documented as Chrome only as it's not even in the path of becoming a standard https://wicg.github.io/eyedropper-api/

}
} catch (error) {
if (error.name !== "AbortError") {
console.error("Error using the eye dropper:", error);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a silent fail will not be that helpful. what can go wrong ?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AbortError is not really an error, it's when you press escape to abort the color picking. Skipping those make sense.

I guess I could throw the other errors instead of logging then in the console tho

Comment thread src/components/color_picker/color_picker.css Outdated
@hokolomopo hokolomopo force-pushed the master-eye-dropper-adrm branch from b9ac93f to fc05188 Compare May 20, 2026 08:08
@rrahir

rrahir commented May 20, 2026

Copy link
Copy Markdown
Collaborator

robodoo r+

@robodoo

robodoo commented May 20, 2026

Copy link
Copy Markdown
Collaborator

@hokolomopo @rrahir because this PR has multiple commits, I need to know how to merge it:

  • merge to merge directly, using the PR as merge commit message
  • rebase-merge to rebase and merge, using the PR as merge commit message
  • rebase-ff to rebase and fast-forward

@rrahir

rrahir commented May 20, 2026

Copy link
Copy Markdown
Collaborator

robodoo r-

@hokolomopo hokolomopo force-pushed the master-eye-dropper-adrm branch from fc05188 to b3ce441 Compare May 20, 2026 13:27
}

get canUseEyeDropper(): boolean {
return !!globalThis.EyeDropper && !this.env.model.getters.isDarkMode();

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dark mode 😢
Worth a comment saying why it cannot work in in dark mode

Comment on lines +225 to +226
// In dark mode we'd have to do the opposite color inversion than then dark mode color inversion to get the correct color.
// But this mathematically cannot always be done, because our color inversion lose information with clipping and rounding.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍
move or copy/paste this comment in the business code

- `globalThis.Chart` was defined twice
- `ChartGeo` was defined in `window` instead of `globalThis`

Task: 6226285
@LucasLefevre LucasLefevre force-pushed the master-eye-dropper-adrm branch from b3ce441 to eab48da Compare June 3, 2026 07:24
@LucasLefevre

Copy link
Copy Markdown
Collaborator

rebased + comment added
robodoo r+

@robodoo

robodoo commented Jun 3, 2026

Copy link
Copy Markdown
Collaborator

@hokolomopo @LucasLefevre 'ci/runbot' failed on this reviewed PR.

This commit adds a button to pick a color from anywhere on your
screen using the EyeDropper API.

The EyeDropper API is still experimental and not widely supported
(only on desktop chromium browser at the time of writing this),
so we make sure the button is only there when the API is avilable.

Task: 6226285
@LucasLefevre LucasLefevre force-pushed the master-eye-dropper-adrm branch from eab48da to 91479ce Compare June 3, 2026 07:46
@LucasLefevre

Copy link
Copy Markdown
Collaborator

robodoo r+

@pro-odoo

pro-odoo commented Jun 6, 2026

Copy link
Copy Markdown
Collaborator

robodoo rebase-ff

@robodoo

robodoo commented Jun 6, 2026

Copy link
Copy Markdown
Collaborator

Merge method set to rebase and fast-forward.

robodoo pushed a commit that referenced this pull request Jun 6, 2026
- `globalThis.Chart` was defined twice
- `ChartGeo` was defined in `window` instead of `globalThis`

Task: 6226285
Part-of: #8737
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
robodoo pushed a commit that referenced this pull request Jun 6, 2026
This commit adds a button to pick a color from anywhere on your
screen using the EyeDropper API.

The EyeDropper API is still experimental and not widely supported
(only on desktop chromium browser at the time of writing this),
so we make sure the button is only there when the API is avilable.

closes #8737

Task: 6226285
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
@robodoo robodoo added the 19.4 label Jun 6, 2026
@robodoo robodoo closed this Jun 6, 2026
@fw-bot fw-bot deleted the master-eye-dropper-adrm branch June 13, 2026 07:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants